<template>
	<view class="box">
		<image src="../../static/logo.png" mode=""></image>
		<view class="" style="margin-bottom: 60rpx;">
			草原宝
		</view>
		<u-input placeholder="请输入手机号" style="width: 600rpx;background-color: #F5F8FF;padding: 20rpx;" border="none"
			v-model="reg_info.mobile">
			<u-icon name="account-fill" slot="prefix" size="20"></u-icon>
		</u-input>

		<u-input placeholder="请输入密码" style="width: 600rpx;margin-top: 26rpx;background-color: #F5F8FF;padding: 20rpx;"
			border="none" v-model="reg_info.password">
			<u-icon name="lock-fill" slot="prefix" size="20"></u-icon>
		</u-input>
		<u-input placeholder="请输入验证码" border="none"
			style="width: 600rpx;margin-top: 26rpx;background-color: #F5F8FF;padding: 20rpx;" v-model="reg_info.code">
			<u-icon name="email-fill" slot="prefix" size="20"></u-icon>
			<template slot="suffix">
				<u-code ref="uCode" @change="codeChange" seconds="30" changeText="Xs" startText="获取验证码"
					endText="重新发送验证码"></u-code>
				<text @tap="getCode" style="color: #5d8eff;">{{tips}}</text>
			</template>
		</u-input>
		<!-- 		<u--input placeholder="后置插槽">
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="20"
								changeText="X秒重新获取哈哈哈"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="success"
								size="mini"
							></u-button>
						</template>
					</u-input>
					</u--input> -->
		<view class="" style="text-align: right;width: 90%;margin-top: 30rpx;" @click="toLog">
			已有账号，点击登录
		</view>
		<view class="btn" @click="regin">
			注册
		</view>
	</view>
</template>

<script>
	import {
		smsSend,
		toRegister
	} from "@/request/api/login.js"
	export default {
		data() {
			return {
				tips: '',
				reg_info: {
					mobile: "",
					"password": "",
					"code": ""
				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async regin() {
				if (!this.reg_info.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!this.reg_info.password) {
					uni.$u.toast('请输入密码');
					return
				}
				if (!this.reg_info.code) {
					uni.showToast({
						title: "输入验证码",
						icon: 'none'
					});
					return;
				}
				let res = await toRegister(this.reg_info);
				if (res.code == 1) {
					uni.$u.toast('注册成功');
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/login/login"
						})
					}, 1000)

				}
			},
			toLog() {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			async getCode() {
				if (!this.reg_info.mobile) {
					uni.$u.toast('请先输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 	// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let res = await smsSend({
						"mobile": this.reg_info.mobile,
						"event": "register"
					})
					uni.hideLoading()
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return
					}
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: white;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.btn {
		background-color: #2DBC26;
		color: white;
		width: 600rpx;
		border-radius: 100px;
		padding: 24rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 30rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			border-radius: 30rpx;
		}
	}
</style>